<!-- 司机管理 -->
<template>
  <div class="container">
    <TablePage
      v-model:change="driverModel.pageIndex"
      :page-list="pageList"
      :columns="tableColumns"
      :page-count="pageCount"
      @click-search="queryData"
    >
      <template #search>
        <TableSearch
          v-model:change="driverModel.deptId"
          :model="driverModel.deptId"
          :datas="depts"
          left-title="营业部"
        ></TableSearch>
        <TableSearch
          v-model:change="driverModel.content"
          :model="driverModel.content"
          type="input"
          left-title="关键字"
        ></TableSearch>
        <TableSearch type="search" @click-search="queryData"></TableSearch>
      </template>
      <el-table-column fixed="right" label="操作" header-align="center" align="center" width="220">
        <template #default="scope">
          <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)"> 删除 </el-button>
          <el-button type="text" size="small" @click.prevent="deleteRow(scope.$index)"> 编辑 </el-button>
        </template>
      </el-table-column>
    </TablePage>
  </div>
  <EditDriverDialog ref="editDriverRef"></EditDriverDialog>
</template>

<script setup lang='ts'>
import { ref } from 'vue'
import TableSearch from '@/components/TableSearch/index.vue'
import TablePage from '@/components/TablePage/index.vue'
import useBaseDriver from '@/composables/driver/useBaseDriver'
import useDriverRequest from '@/composables/driver/useDriverRequest'
import EditDriverDialog from '@/views/system/driver/components/EditDriverDialog.vue'
let { depts, driverModel, tableColumns } = useBaseDriver()
let { pageList, pageCount } = useDriverRequest()
const editDriverRef = ref<InstanceType<typeof EditDriverDialog>>()
const queryData = () => {
  console.log(driverModel)
}

const deleteRow = row => {
  editDriverRef.value.show();
}
</script>
<style lang='scss' scoped>
</style>